<template>
    <div class="grid grid-flow-row auto-rows-max text-gray-500 gap-4">
        <div class="text-xs">MENU</div>
        <IconLink v-for="item in list" v-bind="item" :model-value="current" @update:model-value="onChange" />
        <div class="text-xs">MENU</div>
        <IconLink v-for="item in list2" v-bind="item" :model-value="current" @update:model-value="onChange" />
        <div class="text-xs flex justify-between">
            <span>自建歌单</span>
            <el-space>
                <el-icon :size="14" class="pointer">
                    <Plus />
                </el-icon>
                <el-icon v-if="showList3" :size="14" class="pointer" @click="showList3 = false">
                    <ArrowUp />
                </el-icon>
                <el-icon v-if="!showList3" :size="14" class="pointer" @click="showList3 = true">
                    <ArrowDown />
                </el-icon>
            </el-space>
        </div>
        <div v-if="showList3" class="grid grid-flow-row auto-rows-max text-gray-500 gap-4">
            <IconLink v-for="item in list3" v-bind="item" :model-value="current" @update:model-value="onChange" />
        </div>
    </div>
</template>
<script setup>
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import IconLink from './IconLink.vue';
import { HomeFilled, List, VideoCameraFilled, Menu, StarFilled, GoodsFilled, Histogram, Download, Timer, FolderAdd, Plus, ArrowDown, ArrowUp, Memo } from '@element-plus/icons-vue'
const router = useRouter();
const showList3 = ref(true);
const list = [
    { label: '发现', icon: HomeFilled, router: '/index' },
    { label: '歌单', icon: List, router: '/songsheet' },
    { label: '视频', icon: VideoCameraFilled, router: '/video' },
    { label: '曲库', icon: Menu, router: '/songbook' },
    { label: '榜单曲', icon: Histogram, router: '/billboard' },
    { label: '商品', icon: GoodsFilled, router: '/goods' }
];
const list2 = [
    { label: '我的收藏', icon: StarFilled, router: '/favorite' },
    { label: '下载', icon: Download, router: '/download' },
    { label: '最近播放', icon: Timer, router: '/near' },
]
const list3 = [
    { label: '我的歌单', icon: Memo, router: '/mysongbook' },
    { label: '我收藏的歌单', icon: FolderAdd, router: '/myfavorite' }
]

const allList = [...list, ...list2, ...list3];

const current = computed(() => {
    let item = allList.find(item => router.currentRoute.value.path.indexOf(item.router) >= 0);
    return item?.label;
})

const onChange = function (label) {
    let item = allList.find(item => item.label === label);
    router.replace(item.router);
    console.log(item);
}
</script>
<style scoped>
.pointer {
    cursor: pointer;
}
</style>